<template lang="html">
    <div class="deviceInfo" v-cloak>
        <p class="title">设备基本信息</p>
        <ul>
            <li>
                <span class="name">设备名称</span>
                <span class="value">{{device.name}}</span>
            </li>
            <li>
                <span class="name">设备编号</span>
                <span class="value">{{device.deviceId}}</span>
            </li>
            <li>
                <span class="name">设备状态</span>
                <span class="value">{{getStatus(device.heartTime)}}</span>
            </li>
            <li>
                <span class="name">安防状态</span>
                <span class="value">{{defenseStatus ? '布防' : '撤防'}}</span>
            </li>
            <li>
                <span class="name">剩余电量</span>
                <span class="value">{{ device.power ? device.power : " "}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import {
  Cell,
  Group
} from 'vux'
export default {
  components: {
    Cell,
    Group
  },
  data: function() {
    return {
      device: {},
      defenseStatus:false
    }
  },
  computed: {
    getDefenseStatus: function() {
      return this.$store.state.defenseStatus
    }
  },
  watch: {
    getDefenseStatus: function(val, oldValue) {
        console.log(val);
        if(val){
            this.defenseStatus = val;
        }else{
            this.defenseStatus = val;
        }
    }
  },
  mounted: function() {
    this.getDeviceInfo();
  },
  methods: {
    getDeviceInfo: function() {
      this.$http
        .get("http://iot.malanco.com/myDevice", {
          headers: {
            contentType: "application/json; charset=utf-8"
          },
          responseType: "json"
        })
        .then(response => {
          if (response.data.success == "true") {
            var device = response.data.data;
            if (device != null) {
              if (
                device == null ||
                device.deviceId == "" ||
                device.deviceId == null
              ) {
                this.$vux.alert.show({
                  title: "尚未绑定智能锁",
                  content: "跳转到设备绑定界面",
                  onHide: () => {
                    this.$router.push({
                      path: "/main/bind"
                    });
                  }
                })
                return;
              } else {
                this.device = device;
                this.getDangerStatus(device.defenseStatus);
              }

            } else {
              this.$vux.alert.show({
                title: "尚未绑定智能锁",
                content: "跳转到设备绑定界面",
                onHide: () => {
                  this.$router.push({
                    path: "/main/bind"
                  });
                }
              })
            }
          }
        });
    },
    getStatus: function(time) {
      var now = new Date();
      if (time != null && time > (now.getTime() - 3600000 * 12)) {
        return "在线";
      } else {
        return "离线";
      }
    },
    getDangerStatus: function(Status) {
      if (Status != null && Status == 1) {
        // return "布防";
        this.defenseStatus = true;
      } else {
        // return "撤防";
        this.defenseStatus = false;
      }
    }
  }
}
</script>

<style lang="less">
[v-cloak] {
    display: none;
}
.deviceInfo {
    > p[class="title"] {
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
        padding: 5px 0;
        color: #ccc;
        font-size: 14px;
    }
    li,
    ul {
        margin: 0;
        padding: 0;
    }
    ul {
        padding-left: 10px;
        li {
            padding: 5px 5px 5px 0;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #e6e6e6;
            .value {
                color: #ccc;
            }
        }
    }
}
</style>
